<template>
    <div class="app">
        <div class="header">
            <div class="wrap">
                <img  v-if="resurl+info.pic" :src="resurl+info.pic+'?x-oss-process=image/resize,m_fill,w_750,h_300'" alt="">
            </div>
        </div>
        <div class="title">
            <div class="left">
                <div class="title_name">{{info.name}}</div>
            </div>
            <div class="right">
                <button class="btn"  open-type='share'>
                    <div class="icon">
                        <img src="/static/images/share.png" alt="">
                        <span class="text">分享</span>
                    </div>
                </button>
                <button class="btn" @click="great()">
                    <div class="icon">
                        <img src="/static/images/dz.png" alt="" v-if="info.isgreat==false">
                        <img src="/static/images/dz2.png" alt="" v-else>
                        <span class="dz">{{info.numgreat }}</span>
                        <span class="text">点赞</span>
                    </div>
                </button>
            </div>
        </div>
        <div class='describe'>
            <div class='item'>
                <div class='name' >作者</div>
                <div class='price'>￥{{info.price}}</div>
                <div class='subtitle'></div>
            </div>
        </div>
        <div class="main">
            <div class="main_title">详情</div>
            <p class="text">1111111111111111111111111111111111111111</p>
        </div>
        <div class="bottom">
            <a class="btn" href="/pages/index/index/main"  open-type='reLaunch'>
                <img src="/static/images/home1.png" alt="">
                <span class="text">首页</span>
            </a>
            <button class="btn"  open-type="contact">
                <img src="/static/images/kfkf.png" alt="">
                <span class="text">客服</span>
            </button>
            <a class="btn"  href="/pages/shop/cart/main"  open-type='redirect'>
                <img src="/static/images/gouwuche.png" alt="">
                <span class="text" >购物车</span>
                <text class='num'>{{buynumber}}</text>
                <text class='text'></text>
            </a>
            <div class="btn_f" @click="addshopcar">加入购物车</div>
            <a class="btn_r" @click="buy">付款</a>
        </div>
    </div>
</template>

<script>
    import {change,pay,del,get,clear} from '../../../utils/shoping'
    var that = null
    export default {
        data() {
            return this.datainit({
                id:null,
                info:[],
                buynumber: 0
            })
        },
        onShow() {
            that = this
            that.check()
        },
        mounted(){
            that = this;
            that.goods_id = that.get("goods_id")
        },
        methods: {
            init() {
                that.$post("shop/goods/get",{id:that.goods_id},function(data){
                    that.info = data;
                    that.setbuynumer()
                })
            },
            addshopcar: function () {
                that.setbuynumer()
                change(that.info,1)
                that.init()
            },
            setbuynumer: function () {
                var buynumber = 0;
                var buylist = get()
                for (var i in buylist) {
                    buynumber += buylist[i].buynumber
                }
                that.buynumber = buynumber
            },


            great:function(){
                that.$post("shop/goods/great",{goods_id:that.goods_id},function(data){
                    that.init()
                })
            },
            buy:function(){
                var buylist = [{ id: that.info.id, buynumber: 1 }]
                buylist = JSON.stringify( buylist );
               that.$post("shop/order/pre", { goods_list: buylist, type: "normal" }, function (pre_token) {
                   console.log(pre_token)
                    wx.navigateTo({
                        url: '/pages/shop/make/main?pre_token=' + pre_token,
                    })
                })
            },
        }
    }
</script>

<style scoped lang="less">
    .wrap{
        width: 100%;
        height: 175px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .title{
        width: 100%;
        height: 60px;
        background: #fff;
        display: flex;
        .left{
            flex: 1;
            height: 50px;
            .title_name{
                color: #000;
                line-height: 50px;
                margin-left: 10px;
                font-size: 18px;
            }
        }
        .right{
            width: 100px;
            height: 60px;
            display: flex;
            text-align: center;
            .btn{
                width: 50px;
                height: 60px;
                margin-left: 15px;
                font-size: 14px;
                line-height: 10px;
                background:  none;
                border:none;
                position: relative;
                .icon{
                    margin-top:10px;
                    .dz{
                        position: absolute;
                        top:5px;
                        right:5px;
                        background: red;
                        border-radius: 50%;
                        color: #fff;
                        padding: 2px;
                    }
                    img{
                        display: block;
                        width: 34px;
                        height: 34px;
                        margin: auto;
                        .text{
                            color: #000;
                        }

                    }
                }
            }
        }
    }
    .describe{
        width: 100%;
        height: 130px;
        background: #fff;
        line-height: 25px;
        color:#000;
        .item{
            margin-left: 10px;
            .name{

            }
            .price{
                color:#ff6600;
                span{

                }
            }
            .subtitle{


            }
        }
    }
    .main{
        position: relative;
        margin-top: 5px;
        .main_title{
            text-align: center;
            line-height: 30px;
            color: #666;
            height: 30px;
            background: #FFF;
        }
        .text{
            background: #fff;
            height: 350px;
            margin-top: 5px;
            color:#000;
            position: relative;
            width: 100%;
            box-sizing: border-box;
            border-left: 7px solid #FFF;
            border-right: 7px solid #FFF;
        }
    }
    .bottom{
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0px;
        background: #FFF;
        display: flex;
        .btn{
            width: 50px;
            position: relative;
            .num{
                position: absolute;
                display: block;
                width: 16px;
                height: 16px;
                border-radius: 10px;
                color: #FFF;
                background-color: #900;
                line-height: 16px;
                text-align: center;
                left: 5px;
                top: 2px;
            }
            .texts{
                display: block;
                width: 100%;
                height: 20px;
                text-align: center;
                position: absolute;
                bottom: 0;
                line-height: 20px;
                left: 0;
            }
            img{
                display: block;
                width: 30px;
                height: 30px;
                margin: auto;
            }
            .text{
                width: 100%;
                display: block;
                text-align: center;
                font-size: 12px;
            }
        }
        .btn_f{
            flex: 1;
            background: #EFE804;
            text-align: center;
            color: #FFF;
            line-height: 50px;
        }
        .btn_r{
            flex: 1;
            background: #ff6600;
            text-align: center;
            color: #FFF;
            line-height: 50px;
        }

    }
</style>

